<template>
  <div v-loading="loading">
    <TableSearch
      ref="tableSearch"
      :search-path="searchPath"
      :formItemsInline="formItemsInline"
      :columns="columns"
      :tableData="tableData"
      :form="form"
      @handleTableData="handleTableData"
      @reset="reset"
      :tableBtns="tableBtns"
      :loading="loading"
    >
      <template slot="date">
        <el-form-item>
          <SearchDatePicker
            :start.sync="form.startTime"
            :end.sync="form.endTime"
          />
        </el-form-item>
      </template>
    </TableSearch>
  </div>
</template>

<script>
import TableSearch from '@/components/TableSearch'
import SearchDatePicker from '@/components/SearchDatePicker'
import { hycMessageList, recallHycMessage, delHycMessage } from '@/api/message'
import formatter, { typeMap } from '@/utils/format'

const messageType = {
  0: '未发布',
  1: '已发布',
  2: '已撤回',
}

export default {
  name: 'HycMessageList',
  components: { TableSearch, SearchDatePicker },
  data() {
    return {
      loading: false,
      form: {
        showName: '',
        area: null,
      },
      searchPath: '/web/message-management/hycMessage-management/查询',
      tableBtns: [
        {
          label: '新增',
          click: this.handleAdd,
          icon: 'el-icon-plus',
          resourceId: '/web/message-management/hycMessage-management/新增',
        },
      ],
      formItemsInline: [
        {
          type: 'text',
          value: 'tag',
          placeholder: '请输入关键字',
          clearable: true,
          resourceId: '/web/message-management/hycMessage-management/主题',
        },
        {
          type: 'select',
          value: 'type',
          placeholder: '请选择状态',
          clearable: true,
          options: () => {
            let options = []
            options = Object.keys(messageType).map((item) => {
              return {
                label: messageType[item],
                value: item,
              }
            })

            options.unshift({
              label: '全部',
              value: '',
            })

            return options
          },
          resourceId: '/web/message-management/hycMessage-management/状态',
        },
        {
          slot: 'date',
        },
      ],
      tableData: {},
      columns: [
        {
          label: '主题',
          prop: 'title',
          width: '200px',
          resourceId: '/web/message-management/hycMessage-management/主题',
        },
        {
          label: '通知对象',
          prop: 'targetUser',
          resourceId: '/web/message-management/hycMessage-management/通知对象',
          formatter: (row) => {
            return typeMap.targetUserType[row.targetUser] || ''
          },
        },
        {
          label: '发布时间',
          prop: 'createTime',
          formatter,
          resourceId: '/web/message-management/hycMessage-management/发布时间',
        },
        {
          label: '状态',
          prop: 'type',
          width: '400px',
          resourceId: '/web/message-management/hycMessage-management/状态',
          formatter: (row) => {
            return messageType[row.type] || ''
          },
        },
        {
          label: '操作',
          width: '500px',
          resourceId: '/web/message-management/hycMessage-management/操作',
          buttons: [
            {
              label: '查看',
              size: 'small',
              class: 'table-button-blue',
              resourceId: '/web/message-management/hycMessage-management/查看',
              click: (row) => {
                this.$router.push({
                  path: `/message/xyMessageDetail/${row.id}`,
                })
              },
              ifRender: (row) => {
                return row.type === 1 || row.type === 2
              },
            },
            {
              label: '编辑',
              size: 'small',
              class: 'table-button-green',
              resourceId: '/web/message-management/hycMessage-management/编辑',
              click: (row) => {
                this.$router.push({
                  path: `/message/xyMessageEdit/${row.id}`,
                })
              },
              ifRender: (row) => {
                return row.type === 0
              },
            },
            {
              label: '撤回',
              size: 'small',
              class: 'table-button-orange',
              resourceId: '/web/message-management/hycMessage-management/撤回',
              click: (row) => {
                this.$confirm('您确定要撤回该消息吗？', '撤回消息', {
                  center: true,
                }).then(() => {
                  recallHycMessage({ id: row.id }).then(() => {
                    this.$message({
                      type: 'success',
                      showClose: true,
                      message: '撤回成功',
                    })

                    this.$refs.tableSearch.refreshTable()
                  })
                })
              },
              ifRender: (row) => {
                return row.type === 1
              },
            },
            {
              label: '删除',
              size: 'small',
              class: 'table-button-red',
              resourceId: '/web/message-management/hycMessage-management/删除',
              click: (row) => {
                this.$confirm('您确定要删除该消息吗？', '删除消息', {
                  center: true,
                }).then(() => {
                  delHycMessage({ id: row.id }).then(() => {
                    this.$message({
                      type: 'success',
                      showClose: true,
                      message: '删除成功',
                    })

                    this.$refs.tableSearch.refreshTable()
                  })
                })
              },
              ifRender: (row) => {
                return row.type === 0 || row.type === 2
              },
            },
          ],
        },
      ],
    }
  },
  created() {},
  methods: {
    handleAdd() {
      this.$router.push('/message/xyMessageAdd')
    },
    submit() {},
    handleTableData(params) {
      this.loading = true
      hycMessageList(params)
        .then((res) => {
          this.tableData = {
            list: res.list,
            totalCount: res.totalAmount,
          }
        })
        .catch((err) => {
          console.log(err)
        })
        .finally(() => {
          this.loading = false
        })
    },
    reset() {
      this.form = {}
    },
  },
}
</script>
